			body {
	margin:0;
	background:#000;
	overflow:hidden
}
ul {
	list-style:none;
}
button,ul {
	margin:0;
	padding:0;
}
button {
	border:none;
	outline-style:none;
}
.clock {
	width:240px;
	height:240px
}
.clock_canva {
	width:100%;
	height:100%
}
.setbox:hover .pic_set {
	opacity:1
}
.set-warp {
	display:inline-block;
}
.setting {
	width:36px;
	height:36px;
}
.setting:hover>div {
	transform:rotate(120deg);
}
.pic_set {
	width:36px;
	height:36px;
	background-image:url("");
	transition:all .5s ease-in-out;
}
.set_item {
	top:-330px;
	left:-368px;
	width:432px;
	height:312px;
	box-sizing:border-box;
	border-radius:20px;
}
.set_item,.set_item:before {
	position:absolute;
	background-color:#262729;
	border:1px solid #666;
}
.set_item:before {
	content:"";
	bottom:0;
	right:36px;
	width:20px;
	height:20px;
	border-top-color:transparent;
	border-left-color:transparent;
	transform:translateY(50%) rotate(45deg);
}
.setLoad {
	display:block!important;
	visibility:hidden;
}
.slider {
	position:relative;
	width:220px;
	cursor:pointer;
}
.bar-line {
	left:0;
	background:-webkit-linear-gradient(#fff,#fff) no-repeat,hsla(0,0%,100%,.25);
	background-size:0 100%;
}
.bar-line,.bar-line-right {
	position:absolute;
	top:50%;
	transform:translateY(-50%);
}
.bar-line-right {
	right:0;
	background-color:hsla(0,0%,100%,.25);
}
.bar-handle {
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	box-sizing:border-box;
	border:4px solid #fff;
	background-color:#262729;
	border-radius:50%;
	box-shadow:0 0 0 4px #262729;
}
.time-panel-box {
	height:24px;
	padding:16px 0;
	margin-right:4px;
}
.time-panel-box:hover .time-panel {
	overflow:visible;
}
.time-panel {
	position:relative;
	background-color:#666;
	width:48px;
	height:24px;
	border-radius:4px;
	line-height:24px;
	text-align:center;
	overflow:hidden;
}
.panel-down,.panel-up {
	position:absolute;
	left:50%;
	width:100%;
	transform:translateX(-50%);
	font-weight:900;
	cursor:pointer;
}
.panel-down:hover,.panel-up:hover {
	display:block;
}
.panel-up {
	top:-100%;
	background-image:linear-gradient(0deg,rgba(38,39,41,0),#262729 100%);
}
.panel-down {
	bottom:-100%;
	background-image:linear-gradient(180deg,rgba(38,39,41,0),#262729);
}
.scroll-box {
	position:relative;
	top:-16px;
	height:56px;
	overflow-y:scroll;
	color:#fff;
}
.scroll-box::-webkit-scrollbar {
	display:none;
}
.panel-item:after,.panel-item:before {
	content:"";
	display:block;
	height:16px;
}
.bg {
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
}
.timer {
	position:absolute;
	top:50%;
	width:100%;
	transform:translateY(-50%);
	display:flex;
	justify-content:space-evenly;
}
.timer_hm {
	width:47.5vw;
	height:47.5vw;
}
.timer_hms {
	width:30vw;
	height:30vw;
}
.watchBtn {
	position:absolute;
	width:100%;
	height:100%;
	background-color:hsla(0,0%,100%,.1);
	text-align:center;
	opacity:0;
	transition:all .3s;
	cursor:pointer;
}
.watchBtn:hover {
	opacity:1;
}
.watchBtn:active {
	background-color:hsla(0,0%,100%,0);
}
.watchBtn>div {
	position:absolute;
	left:50%;
	transform:translate(-50%,-50%);
}
.watchBtn>div:first-child {
	font-size:180px;
	top:46%;
}
.watchBtn>div:last-child {
	top:90%;
}
.set_box {
	position:fixed;
	bottom:20px;
	right:40px;
	z-index:1;
}
.set_box_inner {
	padding:20px;
	padding-bottom:0;
	color:#fff;
	font-size:18px;
}
.set_box_inner>li {
	display:flex;
	align-items:center;
	margin-bottom:8px;
}
.setName {
	width:116px;
	margin-right:12px;
	text-align:right;
}
.pickItem {
	display:flex;
	text-align:center;
	border-radius:6px;
	cursor:pointer;
}
.pickItem>li {
	box-sizing:border-box;
	width:60px;
	height:24px;
	line-height:22px;
	border:1px solid #666;
	border-right:0;
}
.pickItem>li:first-child {
	border-top-left-radius:inherit;
	border-bottom-left-radius:inherit
}
.pickItem>li:last-child {
	border-right:1px solid #666;
	border-top-right-radius:inherit;
	border-bottom-right-radius:inherit;
}
.pick-active {
	color:#333;
	background-color:#fff
}
.timerBtn {
	box-sizing:border-box;
	width:60px;
	height:24px;
	border-radius:4px;
	margin-right:6px;
	background-color:#fff;
	color:#1c1c1c;
	font-size:16px;
	cursor:pointer;
}
.timerBtn:active {
	background-color:#ddd;
}
.startBtn {
	background-color:#666;
	color:#fff;
}
.startBtn:active {
	background-color:#555;
}
.iconCancel,.iconTime,.iconTomato {
	display:inline-block;
	width:20px;
	height:20px;
	vertical-align:middle;
	background-size:contain;
}
.iconTime {
	background-image:url("")
}
.iconTomato {
	margin-top:-3px;
	background-image:url("")
}
.iconCancel {
	background-image:url("")
}
